<template>
  <div>
    <FormItemRest>
      <div class="flex gap-10px items-center">
        <Input v-model:value="selectValue" :placeholder="placeholder" :size="size" />
        <Image
          v-if="selectValue"
          :src="
            selectValue
              ? serverInfo.rootPath +
                '/static' +
                (selectValue && selectValue.startsWith('/') ? selectValue : `/${selectValue}`)
              : ''
          "
        />
        <a-button type="primary" @click="handleSearch">选择</a-button>
      </div>
      <SelectIconModal @register="registerSelectRoleModal" @success="handleSuccess" />
    </FormItemRest>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch, PropType } from 'vue';
  import { Input, Form, Image } from 'ant-design-vue';
  import SelectIconModal from './SelectIconModal.vue';
  import { useModal } from '/@/components/Modal';
  const FormItemRest = Form.ItemRest;
  import { useUserStore } from '/@/store/modules/user';
  import { SizeType } from 'ant-design-vue/es/config-provider';

  const emit = defineEmits(['change', 'update:value']);
  const props = defineProps({
    size: { type: String as PropType<SizeType>, default: 'default' },
    placeholder: { type: String, default: '请选择' },
    value: { type: String, default: '' },
    //图标数组
    options: { type: Array as PropType<Recordable[]>, default: () => [] },
  });
  const userStore = useUserStore();
  const serverInfo = userStore.getServerInfo;
  const selectValue = ref('');
  const [registerSelectRoleModal, { openModal }] = useModal();
  const handleOpen = () => {
    console.log('props', props);
    openModal(true, {
      options: props.options,
    });
  };
  //点击按钮
  const handleSearch = () => {
    handleOpen();
  };
  const handleSuccess = (record) => {
    emit('update:value', record.value);
    emit('change', record.value, record);
  };
  watch(
    () => props.value,
    (newValue) => {
      selectValue.value = newValue;
    },
    {
      // deep: true,
      immediate: true,
    },
  );
</script>
